<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="配送区域" :modal-append-to-body="false" :visible.sync="areaShow" :before-close="closeDialog" class="tl size_13" width="1200px">
      <div class="extract_area_tip" style="margin-bottom: 10px">Tip:双击白色圆点可清除该圆点</div>
      <div id="containerMap"></div>
      <div class="extract_area_bottom">
        <el-button :loading="$store.state.isLoading" type="primary" size="medium" @click="saveArea"> 保存 </el-button>
        <!-- <el-button :loading="$store.state.isLoading" type="danger" size="medium" @click="clearArea"> 清空 </el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
const GPSKEY = "9ea145d7d33cad98b37ddb1eb43dcb2d";
export default {
  name: "extract_area",
  data() {
    return {
      storeInfo: {},
      areaShow: false,
      polyEditor: null,
      polygon: null,
      map: null,
    };
  },
  components: {},
  created() {},
  methods: {
    clearArea() {
      let params = {};
      params.id = this.storeInfo.id;
      params.map = "";
      this.$api.getRider.setStoreDeliveryArea(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("编辑成功");
          this.areaShow = false;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    saveArea() {
      let arr = this.polygon.getPath();
      let n_arr = [];
      arr.forEach((item, i) => {
        n_arr.push([item.lng, item.lat]);
      });
      console.log(n_arr);
      let params = {};
      params.id = this.storeInfo.id;
      params.map = JSON.stringify(n_arr);
      this.$api.getRider.setStoreDeliveryArea(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("编辑成功");
          this.areaShow = false;
        }
      });
    },
    init(item) {
      this.$api.getUser.extractEdit({ id: item.id }).then((res) => {
        if (res.data.code == 200) {
          this.storeInfo = res.data.result;
          this.areaShow = true;
          this.$nextTick(() => {
            var url = `https://webapi.amap.com/maps?v=2.0&key=${GPSKEY}&callback=onLoad&plugin=AMap.PolygonEditor`;
            var jsapi = document.createElement("script");
            jsapi.charset = "utf-8";
            jsapi.src = url;
            document.head.appendChild(jsapi);

            window.onLoad = () => {
              var that = this;
              that.map = new AMap.Map("containerMap", {
                resizeEnable: true,
                mapStyle: "amap://styles/light",
                zoom: 12,
              });

              that.map.plugin(["AMap.ControlBar", "AMap.MapType", "AMap.Scale"], function () {
                var controlBar = new AMap.ControlBar({
                  showZoomBar: true,
                  showControlButton: true,
                  position: { bottom: "0px", right: "10px" },
                });
                //地图类型切换
                var type = new AMap.MapType({
                  defaultType: 0, //使用2D地图
                });
                var scale = new AMap.Scale();
                that.map.addControl(controlBar);
                that.map.addControl(scale);
                that.map.addControl(type);

                let areaList = [];
                if (that.storeInfo.map && that.storeInfo.map != "[]") {
                  areaList = JSON.parse(that.storeInfo.map);
                } else {
                  that.$message.success("已初始化点位，请规划区域");
                  areaList.push([that.storeInfo.longitude, that.storeInfo.latitude]);
                  areaList.push([that.storeInfo.longitude - 0.005, that.storeInfo.latitude - 0.005]);
                  areaList.push([that.storeInfo.longitude - 0.005, that.storeInfo.latitude - 0.001]);
                }
                console.log(areaList);
                that.polygon = new AMap.Polygon({
                  path: areaList,
                  strokeColor: "#FF33FF",
                  strokeWeight: 6,
                  strokeOpacity: 0.2,
                  fillOpacity: 0.4,
                  fillColor: "#1791fc",
                  zIndex: 50,
                  bubble: true,
                });
                that.map.add([that.polygon]);
                that.map.setFitView();
                that.polyEditor = new AMap.PolygonEditor(that.map, that.polygon);
                that.polyEditor.open();
              });
            };
          });
        }
      });
    },
    closeDialog() {
      this.areaShow = false;
      this.polyEditor = null;
      this.polygon = null;
      this.map = null;
      this.storeInfo = {};
    },
  },
};
</script>
<style lang="less" scoped>
#containerMap {
  width: 100%;
  height: 60vh;
}

.extract_area_tip {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: red;
}
.extract_area_bottom {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
